<!-- 分类页面 -->
<template>
  <div class="Sort">
    <!-- 组件 头部搜索 -->
    <xrzp-HeaderSearch @onSearch="onSearch" />

    <!-- 加载动画 -->
    <xrzp-Loading v-if="!foodsList&&!NotSearch"></xrzp-Loading>

    <!-- 未搜索到数据 -->
    <xrzp-EmptyState v-else-if="NotSearch"></xrzp-EmptyState>  

    <van-row v-else-if="foodsList">
      <!-- 侧边栏导航 -->
      <van-col span="5">
        <van-sidebar v-model="active" class="sideNav">
          <van-sidebar-item class="sideNav-item" v-for="(item, inx) in sortList" :key="inx" :title="isSearch&&item.name==sortList[active].name?search:item.name"/>
        </van-sidebar>
      </van-col>
      <!-- 标题 -->
      <van-col span="19" >
        <div class="title" >
          <van-cell-group class="search" v-if="isSearch"> {{ search }} </van-cell-group>
          <van-cell-group class="search" v-else> {{ sortList[active].name }} </van-cell-group>
        </div>

        <van-list v-model="loading" finished-text="没有更多了" @load="loadMore" :finished="finished">
          <van-row>
            <div v-for="(item, index) in foodsList" :key="index" :title="item">
              <router-link :to="`/sort/sortDetail/${item.id}`">
                <van-col span="12">
                  <van-image class="image" :src="item.pic" />
                  <div class="name">{{ item.name }}</div>
                </van-col>
              </router-link>
            </div>
          </van-row>
        </van-list>
      </van-col>
      <xrzp-Istop class="mb50"></xrzp-Istop>
    </van-row>

    <!-- 底部选项卡 -->
    <xrzp-FootTabbar></xrzp-FootTabbar>
  </div>
</template>

<script>
// 引入组件
import HeaderSearch from "@/components/HeaderSearch.vue";
import EmptyState from "@/components/EmptyState.vue";
import { axios_byclass,axios_search } from "@/api/data_axios";
export default {
  // 组件局部注册
  components:{"xrzp-HeaderSearch": HeaderSearch,"xrzp-EmptyState": EmptyState},
  data(){
    return{
      NotSearch:false, // 未搜索到数据 
      start:0,         // 起始条数
      loading: false,  // 加载状态
      finished: false, // 完成状态
      search: "",      // 搜索的值
      active: 0,       // 导航条的初始值为0
      isSearch: false, // 搜索 判断条件
      sortList: [      // 菜谱分类 侧边导航条内容
        // { classid: 324, name: "粥" },
        { classid: 352, name: "羹" },
        { classid: 351, name: "汤" },
        { classid: 326, name: "面" },
        { classid: 333, name: "馄饨" },
        { classid: 332, name: "汤圆" },
        { classid: 316, name: "腌菜" },
        { classid: 313, name: "药膳" },
        { classid: 335, name: "饺子" },
        { classid: 334, name: "馒头" },
        { classid: 341, name: "饼干" },
      ],
      foodsList: null, // 菜谱分类下的数据
      appkey:"13e76141171ebe61f22e24477b559988"
    }
  },
  watch:{
    active: {
      handler(newval) {
        //滚动到顶部
        window.scrollTo(0, 0);
        this.start = 0;
        this.isSearch = false;
        this.finished = false;
        this.loading = false;
        // newval 即是切换到的类别cid,可以作为cid发请求
        // 发请求 更新列表
        this.getfoodsList(this.sortList[newval].classid);
      },
      immediate: true //开启首次监听赋值（不开启首次监听不到）
    }
  },
  methods:{
    // 点击搜索发送请求
    onSearch(search) {
      if (search !== "") { //非空值进行搜索
        this.isSearch = true;
        this.start = 0;
        this.search = search;
        window.scrollTo(0, 0);
        let data = {
          keyword:search,
          start:0,
          num:20,
          appkey:this.appkey
        }
        axios_search(data).then(res=>{
          this.foodsList = res.result.result.list;
          this.NotSearch = res.result.msg == "没有信息";
        })
      } else { //空值复原
        this.isSearch = false;
        this.search = "";
        this.start = 0;
        window.scrollTo(0, 0);
        this.getfoodsList(this.sortList[this.active].classid);
      }
    },
    getfoodsList(classid) {
      let data = {
        classid,
        start:0,
        num:20,
        appkey:this.appkey
      }
      axios_byclass(data).then(res=>{
        this.foodsList = res.result.result.list;
        this.NotSearch = res.result.msg == "没有信息";
      })
    },
    // 触底加载
    loadMore() {
      this.start += 20;
      this.loading = true;
      if ( this.isSearch ) {
        let data = {
          keyword:this.search,
          start:this.start,
          num:20,
          appkey:this.appkey
        }
        axios_search(data).then(res=>{
          if ( res.result.msg == "没有信息") {
            // 数据全部加载完成
            this.finished = true;
          } else {
            this.foodsList = [...this.foodsList,...res.result.result.list];
            // 加载状态结束
            this.loading = false;
          }
        })
      } else {
        let data = {
          classid:this.sortList[this.active].classid,
          start:this.start,
          num:20,
          appkey:this.appkey
        }
        axios_byclass(data).then(res=>{
          if ( res.result.msg == "没有信息") {
            // 数据全部加载完成
            this.finished = true;
          } else {
            this.foodsList = [...this.foodsList,...res.result.result.list];
            // 加载状态结束
            this.loading = false;
          }
        })
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.Sort{
  .sideNav {
    position: fixed;
    top: 50px;
    font-weight: bold;
    &-item {
      line-height: 18px;
    }
  }
  .title {
    width: 100%;
    text-align: left;
    font-size: 12px;
    position: fixed;
    z-index: 1;
    font-weight: bold;
    margin-top: 54px;
    .search {
      background-color: #f0f9eb;
      padding: 7px;
    }
  }
  .van-list {
    margin: 84px 0 50px 0;
    .image {
      margin-right: 10px;
    }
    .name {
      margin: 5px 0;
      font-size: 5px;
      text-align: center;
      color: black;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      text-overflow: ellipsis;
      word-wrap: break-word;
      word-break: break-all;
      overflow: hidden;
    }
  }
}
</style>
